<template>
  <view class="container">
    <u-navbar
      :is-fixed="false"
      :border-bottom="false"
      :is-back="true"
      back-icon-name="arrow-leftward"
      :title="title"
      :background="{ background: '#fff' }"
      title-color="#000000"
    >
    </u-navbar>
    <u-toast ref="uToast" />
    <view class="content">
      <view v-for="good in goodList" class="each-good">
        <image @click="viewGoodDetail(good)" class="cover" :src="imgUrl + good.cover"></image>
        <view class="info" hover-class="none" hover-stop-propagation="false">
          <view @click="viewGoodDetail(good)" class="title">{{ good.name }}</view>
          <view @click="viewGoodDetail(good)" class="price">
            <view style="font-size: 24rpx;margin-top: 8rpx;">¥ </view>
            <view style="font-size: 30rpx">{{ good.price }}</view>
          </view>
          <view @click="viewGoodDetail(good)" class="desc">{{ good.desc }}</view>
        </view>
      </view>
      <u-empty v-if="goodList.length == 0" text="没有找到相关商品~" mode="list"></u-empty>
    </view>
  </view>
</template>

<script>
import { getMenu } from "../../api/system/api";
import moment from "moment";
export default {
  data() {
    return {
      showSex: false,
      userInfo: {},
      key: "",
      goodList: [],
      imgUrl: "http://127.0.0.1:3000/",
      title: ''
    };
  },
  onLoad(option) {
    this.key = option.key;
    this.type = option.type;
    this.area = option.area;
    this.category = option.category;
    this.title = this.key || this.type || this.category || this.area || '全部商品'
    this.getData();
  },
  methods: {
    getData() {
      let params = {
        page: 1,
        pageSize: 100,
      }
      if (this.key) {
        params.name = this.key
      }
      if (this.type) {
        params.type = this.type
      }
      if (this.category) {
        params.category = this.category
      }
      if (this.area) {
        params.area = this.area
      }
      getMenu(params).then((res) => {
        this.goodList = res.data.data;
      });
    },
    addCart(good) {
      // uni.setStorage({     //存入Storage
      //   key:'userInfo',    //自己取个名字
      //   data: res.data,
      //   success: () => {
      //     this.$refs.uToast.show({
      //       title: '登录成功',
      //       type: '',
      //     })
      //     uni.$emit('login', {
      //       userInfo: res.data
      //     })
      //     uni.switchTab({ url: `/pages/user/center` });
      //   }
      // })
      // this.$refs.uToast.show({
      //   title: "已加入购物车~",
      //   type: "success",
      // });
    },
    viewGoodDetail(good) {
      this.$u.route('/pages/good/goodDetail', {
        good: JSON.stringify(good)
      })
    }
  },
};
</script>

<style lang="scss">
.container {
  min-height: 100vh;
  overflow: hidden;
  background: #fff3f3;
}
.cover {
  width: 160rpx;
  height: 180rpx;
}
.each-good {
  width: 100%;
  height: 200rpx;
  background: #fff;
  padding: 12rpx 20rpx;
  display: flex;
  margin-top: 20rpx;
  justify-content: space-between;
  position: relative;

  .info {
    width: calc(100% - 200rpx);
    .icon {
      position: absolute;
      right: 30rpx;
      top: 30%;
      z-index: 99;
    }
  }
  .title {
    font-size: 30rpx;
    font-weight: bold;
    margin-bottom: 10rpx;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
  }
  .price {
    color: red;
    display: flex;
    margin-bottom: 10rpx;
  }
  .desc {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    font-size: 22rpx;
  }
}
</style>
